<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>KonvaJS Blur Comparison Sandbox</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=1.0, minimum-scale=1.0, maximum-scale=1.0"
    />
    <style>
      body {
        margin: 0;
        padding: 20px;
        font-family: Arial, sans-serif;
        background: #f0f0f0;
      }
    </style>
  </head>

  <body>
    <div id="container"></div>
    <script type="module">
      import Konva from '../src/index.ts';

      const stage = new Konva.Stage({
        container: 'container',
        width: window.innerWidth,
        height: window.innerHeight,
      });

      const layer = new Konva.Layer();
      stage.add(layer);

      // const circle = new Konva.Circle({
      //   x: 100,
      //   y: 100,
      //   radius: 10,
      //   fill: 'red',
      // });
      // layer.add(circle);
      // throw new Error('test');

      // Given gridRows and gridCols, compute maximum possible radius and position circles
      const gridRows = 200;
      const gridCols = 200;
      const width = window.innerWidth;
      const height = window.innerHeight;

      // Calculate spacing and radius so circles fit entire window
      // There are (gridCols - 1) spaces between centers horizontally, and (gridRows - 1) vertically
      // The available width is "width", so (gridCols) circles and (gridCols-1) spaces between
      // The diameter must fit: gridCols * diameter + (gridCols - 1) * gap <= width
      // But to maximize, gap should equal to at least 0, so best layout is circles tangent

      // So the max diameter horizontally is width / gridCols
      // Likewise for vertical
      const cellWidth = width / gridCols;
      const cellHeight = height / gridRows;
      const radius = Math.min(cellWidth, cellHeight) / 2;

      const circles = [];

      // Create grid of circles - centers in each cell's center
      for (let row = 0; row < gridRows; row++) {
        for (let col = 0; col < gridCols; col++) {
          const cx = cellWidth * col + cellWidth / 2;
          const cy = cellHeight * row + cellHeight / 2;
          const c = new Konva.Circle({
            x: cx,
            y: cy,
            radius: radius,
            fill: Konva.Util.getRandomColor(),
            id: `circle-${row}-${col}`,
          });
          circles.push({
            node: c,
            x: cx,
            y: cy,
            row,
            col,
          });
          layer.add(c);
        }
      }
      layer.draw();

      // Test hits at each center
      for (const cInfo of circles) {
        const { node, x, y } = cInfo;
        const hit = stage.getIntersection({ x, y });
        if (hit !== node) {
          const gotId = hit ? hit.id && hit.id() : null;
          console.error(
            `Hit test failed at (${x},${y}): expected id=${node.id()}, got id=${gotId}`
          );
        }
      }
      console.log('Hit test grid check complete.');
    </script>
  </body>
</html>
